<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>
    <div id="app"></div>
</body>
<script>
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    {
        // 1- root.render可以使用多次,最后一次会把前者覆盖掉！
        // root.render(1);
        // root.render(2);
    }
    {
        // 2- 可以指定多个根容器吗？可以，但是不建议！ 1 2
        // root.render("root");
        // const app = ReactDOM.createRoot(document.querySelector("#app"));
        // app.render("app");
    }
    {
        // 3- 重点：指定数据的类型
        // 3-1- 数字，字符串(如果字符串中携带了标签，那么不会被浏览器识别)
        // 3-2- null,undefined,true,false 不会进行任何的渲染！
        // 3-3- 对象和函数类型不支持(对象和函数不能作为子元素)
        // 3-4- 数组：数组会被展开 [1,2,3,4]---->被展开以后： 1234

        // root.render(1);
        // root.render("字符串");
        // root.render("<a>字符串</a>");
        // root.render(null);
        // root.render(undefined);
        // root.render(true);
        // root.render(false);

        // root.render({a:1,b:2});
        // root.render(function(){})
        // root.render(fn())

        root.render([1,2,3,4])

        // function fn(){
        //     return "fn-render";
        // }
    }

</script>
</html>